<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue基本用法</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        window.onload = function(){
            let vue = new Vue({
                // 定义vue作用域
                // 其值是指向了某个元素
                // vue的作用域即为该元素中
                // 使用选择器表示哪一个元素
                el: "#d1",
                // 定义Vue的数据仓库,Model
                data:{
                    msg: "Hello Vue"
                }
            })
        }
    </script>
</head>
<body>
<div id="d1">
    <!--
        v-model:是Vue的一种指令,用于实现双向数据绑定
        当双向数据绑定之后,只要有一方数据发生了改变
        则另一方数据随之改变
        其属性值指向的是数据库仓库中某一个数据的key
        表示当前元素的值与指定的key的数据进行双向数据绑定
    -->
    <input type="text" id="inText" v-model="msg"><br/>
    <!--
        可以使用插值表达式展示数据仓库中指定key的数据
        语法:{{ key }}
    -->
    <span id="s1">{{msg}}</span>
</div>
<hr/>
<div id="d2">
    <input type="text" id="inText2" v-model="msg"><br/>
    <span id="s2">{{msg}}</span>
</div>
</body>
</html>